<template>
	<view>
		<view class="topMonthTime_ll flexBA">
			<!-- <view >上一月</view> -->
			<image class="monthImg" src="@/static/image/workbench/month_left.png" mode="" @click="lastMonth()"></image>
			<view class="yearMonth">
				<!-- <image class="calendar_ll" src="../static/index/calendar.png"></image> -->
				{{year-1911}}-{{monthChoose.split("-")[1]}}/{{Number(nextmonth)>9?nextmonth:'0'+nextmonth}}
			</view>
			<image class="monthImg" src="@/static/image/workbench/month_right.png" mode="" @click="nextMonthfn()"></image>
			<!-- <view
				:style="(year+''+(month<10?'0'+month:month))*1<(nowYear+''+(nowMonth<10?'0'+nowMonth:nowMonth))*1?'':'color:#CFCFCF'"
				@click="nextMonth()">下一月</view> -->
		</view>
		<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
			:safeAreaInsetBottom="safeAreaInsetBottom" @close="value=false" :z-index="uZIndex"
			:border-radius="borderRadius" :closeable="closeable">
			<view class="u-calendar">
				<view class="u-calendar__header">
					<view class="u-calendar__header__text">
						{{toolTip}}
					</view>
				</view>
				<view class="u-calendar__action u-flex u-row-center flexAA">
					<view class="u-calendar__action__icon">
						<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor"
							@click="changeYearHandler(0)"></u-icon>
					</view>

					<view class="u-calendar__action__text">{{ year }}年</view>

					<view class="u-calendar__action__icon">
						<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor"
							@click="changeYearHandler(1)"></u-icon>
					</view>
				</view>
				<!-- 日历主体 -->
				<view class="list">
					<view class="info" :class="(index+1)==month?'infoChoose':''" v-for="(item,index) in 12"
						@click="((index+1)>nowMonth)&&(year==nowYear)?'':month=(index+1)">
						<text :style="((index+1)>nowMonth)&&(year==nowYear)?'color:#CFCFCF':''">{{index+1}}月</text>
					</view>

				</view>

				<view class="u-calendar__bottom">
					<view class="u-calendar__bottom__choose">
						<text>{{year}}-{{month}}</text>
					</view>
					<view class="u-calendar__bottom__btn">
						<u-button style="background: #d43b37;" hover-class="none" :type="btnType" shape="circle"
							size="default" @click="btnFix()">确定</u-button>
					</view>
					<!-- <view style="height: 140rpx;"></view> -->
				</view>
			</view>
		</u-popup>
		<view class="mcMonth" v-if="showMc">
			<view class="mcMonthText">請選擇正确時間！</view>
		</view>
	</view>

</template>
<script>
	/**
	 * calendar 日历
	 * @description 此组件用于單個選擇日期,范围選擇日期等,日历被包裹在底部弹起的容器中。
	 * @tutorial http://uviewui.com/components/calendar.html
	 * @property {String} mode 選擇日期的模式,date-为單個日期,range-为選擇日期范围
	 * @property {Boolean} v-model 布尔值变量,用于控制日历的弹出与收起
	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全區适配(默认false)
	 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
	 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
	 * @property {String Number} max-year 可切换的最大年份(默认2050)
	 * @property {String Number} min-year 最小可选日期(默认1950)
	 * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
	 * @property {String Number} max-date 最大可选日期(默认当前日期)
	 * @property {String Number} 弹窗顶部左右两边的圆角值,單位rpx(默认20)
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
	 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
	 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
	 * @property {String} color 日期字体的默认颜色(默认#303133)
	 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
	 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
	 * @property {String} range-bg-color 起始/结束日期之间的區域的背景颜色(默认rgba(41,121,255,0.13))
	 * @property {String} range-color 選擇范围内字体颜色(默认#2979ff)
	 * @property {String} start-text 起始日期底部的提示文字(默认 '開始')
	 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
	 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
	 * @property {String} toolTip 顶部提示文字,如設置名为tooltip的slot,此参数将失效(默认 '選擇日期')
	 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
	 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
	 */
	export default {

		name: 'calendarMonth',
		props: {
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			// 是否允许切换年份
			changeYear: {
				type: Boolean,
				default: true
			},
			// 弹窗顶部左右两边的圆角值
			borderRadius: {
				type: [String, Number],
				default: 20
			},
			// 年份切换按钮箭头颜色
			yearArrowColor: {
				type: String,
				default: '#909399'
			},
			//按钮样式类型
			btnType: {
				type: String,
				default: 'primary'
			},
			// 是否显示右上角的关闭图标
			closeable: {
				type: Boolean,
				default: true
			},
			// 顶部的提示文字
			toolTip: {
				type: String,
				default: '選擇月份'
			},
			// 默认時間  可用
			chooseData: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				year: '',
				month: '',
				nowYear: '', //当前年 判断是否可以下一月用
				nowMonth: '', //当前月判断是否可以下一月用
				value: false,
				monthChoose: '',
				showMc: false, //是否显示弹出层
				nextmonth: "",
				arr: [
					[1, 2],
					[3, 4],
					[5, 6],
					[7, 8],
					[9, 10],
					[11, 12]
				],
				num: 0
			};
		},
		computed: {
			uZIndex() {
				// 如果用户有传递z-index值,优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		created() {
			this.init()
		},

		methods: {
			lastMonth() {
				if (Number(this.num) > 0) {
					this.num = this.num - 1
					this.month = this.arr[this.num][0]
					this.nextmonth = this.arr[this.num][1]
				} else {
					this.changeYearHandler(0)
					this.num = 5
					this.month = this.arr[this.num][0]
					this.nextmonth = this.arr[this.num][1]
				}
				this.monthChoose = this.year + '-' + (this.month < 10 ? '0' + this.month : this.month)
				let data = {
					year: this.year,
					month: this.month > 9 ? this.month : "0" + this.month,
					nextmonth: this.nextmonth > 9 ? this.nextmonth : "0" + this.nextmonth,
				}
				this.$emit('changeMonth', data);
			},
			nextMonthfn() {
				if ((this.year + '' + (this.month < 10 ? '0' + this.month : this.month)) * 1 < (this.nowYear + '' + (this
						.nowMonth < 10 ? '0' + this.nowMonth : this.nowMonth)) * 1) {
					if (Number(this.num) < 6) {
						this.num = this.num + 1
						this.month = this.arr[this.num][0]
						this.nextmonth = this.arr[this.num][1]
					} else {
						this.changeYearHandler(1)
						this.num = 0
						this.month = this.arr[this.num][0]
						this.nextmonth = this.arr[this.num][1]
					}
					this.monthChoose = this.year + '-' + (this.month < 10 ? '0' + this.month : this.month)
					let data = {
						year: this.year,
						month: this.month > 9 ? this.month : "0" + this.month,
						nextmonth: this.nextmonth > 9 ? this.nextmonth : "0" + this.nextmonth,
					}
					this.$emit('changeMonth', data);
				}

			},
			btnFix() {
				var that = this;
				var chooseMonth = that.year + (that.month < 10 ? '0' + this.month : this.month + '')
				var nowMonth = that.nowYear + (that.nowMonth < 10 ? '0' + this.nowMonth : this.nowMonth + '')
				if (chooseMonth <= nowMonth) {
					that.monthChoose = that.year + '-' + (that.month < 10 ? '0' + this.month : this.month)
					that.value = false
					that.$emit('changeMonth', that.monthChoose);
				} else {
					that.showMc = true
					setTimeout(function() {
						that.showMc = false
					}, 1000)

				}

			},
			init() {
				console.log(this.chooseData)
				if (this.chooseData) {
					let now = new Date();
					var newData = this.chooseData.split("/")
					this.year = newData[0] * 1;
					this.month = newData[1] < 10 ? (newData[1].replace('0', '')) * 1 : newData[1] * 1;

					this.nowYear = now.getFullYear();
					this.nowMonth = now.getMonth() + 1;

					this.monthChoose = this.chooseData
				} else {
					let now = new Date();
					this.year = now.getFullYear();
					let month = now.getMonth() + 1;
					this.arr.forEach((item, index) => {
						item.forEach((ite, ind) => {
							if (month == ite) {
								this.num = index
								this.month = item[0]
								this.nextmonth = item[1]
							}
						})
					})
					this.nowYear = now.getFullYear();
					this.nowMonth = now.getMonth() + 1;
					this.monthChoose = now.getFullYear() + '-' + ((this.month) < 10 ? '0' + (this.month) :
						(this.month))
					let data = {
						year: this.year,
						month: this.month > 9 ? this.month : "0" + this.month,
						nextmonth: this.nextmonth > 9 ? this.nextmonth : "0" + this.nextmonth,
					}
					this.$emit('changeMonth', data);
				}

			},
			changeYearHandler(isAdd) {
				let year = isAdd ? this.year + 1 : this.year - 1;
				if (this.nowYear >= year) {
					this.year = year;
				}

			},

		}
	};
</script>

<style scoped lang="scss">
	.monthImg {
		width: 34rpx;
		height: 34rpx;
	}

	// @import "../uview-ui/libs/css/style.components.scss";

	.mcMonthText {
		padding: 10rpx 20rpx;
		background-color: rgba(000, 000, 000, 0.4);
		color: #fff;
		border-radius: 12rpx;

	}

	.mcMonth {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(000, 000, 000, 0);
		z-index: 99999999999999;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
	}

	.infoChoose {
		background: rgb(212, 59, 55);
		color: #fff;
	}

	.info {
		width: 120rpx;
		height: 120rpx;
		margin: 0 15rpx;
		margin-top: 30rpx;
		text-align: center;
		line-height: 120rpx;
		font-size: 32rpx;
		default: #303133;
		border-radius: 10rpx;
	}

	.list {
		width: 680rpx;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		margin-left: 75rpx;
		margin-bottom: 30rpx;
	}

	.u-calendar {
		color: $u-content-color;

		&__header {
			width: 100%;
			box-sizing: border-box;
			font-size: 30rpx;
			background-color: #fff;
			color: $u-main-color;

			&__text {
				margin-top: 30rpx;
				padding: 0 60rpx;
				// @include vue-flex;
				justify-content: center;
				align-items: center;
			}
		}

		&__action {
			padding: 40rpx 0 40rpx 0;

			&__icon {
				margin: 0 16rpx;
			}

			&__text {
				padding: 0 16rpx;
				color: $u-main-color;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
			}
		}





		&__bottom {
			width: 100%;
			// @include vue-flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #fff;
			padding: 0 40rpx 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: $u-tips-color;

			&__choose {
				height: 50rpx;
			}

			&__btn {
				width: 100%;
			}
		}
	}

	.calendar_ll {
		width: 30rpx;
		height: 29rpx;
		margin-right: 10rpx;
	}

	.topMonthTime_ll {
		width: 100%;
		height: 90rpx;
		padding: 0 90rpx;
		box-sizing: border-box;
	}

	.yearMonth {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0 20rpx;
	}

	.flexBA {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flexAA {
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
	}
</style>